<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>初始渲染的过度</title>
        <link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

        <style>

        </style>
    </head>
    <body>
        我们可以通过以下特性来自定义过渡类名：
        <ul>
            <li>enter-class</li>
            <li>enter-active-class</li>
            <li>leave-class</li>
            <li>leave-active-class</li>
        </ul>


        <div id="app">
            <button @click="show = !show">
                Toggle render
            </button>
            <transition
                    appear
                    appear-class="custom-appear-class"
                    appear-active-class="custom-appear-active-class"

                               name="custom-classes-transition"
                               enter-active-class="animated tada"
                               leave-active-class="animated boutRight"

            >
                <p v-if="show">hello</p>
            </transition>
        </div>

        <script>
            var vm = new Vue({
                el : '#app',
                data : {
                    show : true
                }
            });
        </script>
    </body>
</html>